:root {
  --zitadel-color-primary: var(--zitadel-color-primary-500);
  --zitadel-color-background: var(--zitadel-color-background-500);
  --zitadel-color-warn: var(--zitadel-color-warn-500);
  --zitadel-color-text: var(--zitadel-color-text-500);

  --zitadel-color-primary-50: #eaedfa;
  --zitadel-color-primary-100: #ccd2f2;
  --zitadel-color-primary-200: #aab4ea;
  --zitadel-color-primary-300: #8796e1;
  --zitadel-color-primary-400: #6e80da;
  --zitadel-color-primary-500: #5469d4;
  --zitadel-color-primary-600: #4d61cf;
  --zitadel-color-primary-700: #4356c9;
  --zitadel-color-primary-800: #3a4cc3;
  --zitadel-color-primary-900: #293bb9;
  --zitadel-color-primary-rgb: rgb(84, 105, 212);
  --zitadel-color-primary-contrast: var(--zitadel-color-white);

  --zitadel-color-warn-50: #f9e7eb;
  --zitadel-color-warn-100: #f0c4cc;
  --zitadel-color-warn-200: #e69dab;
  --zitadel-color-warn-300: #dc7689;
  --zitadel-color-warn-400: #d5586f;
  --zitadel-color-warn-500: #cd3b56;
  --zitadel-color-warn-600: #c8354f;
  --zitadel-color-warn-700: #c12d45;
  --zitadel-color-warn-800: #ba263c;
  --zitadel-color-warn-900: #ae192b;

  --zitadel-font-family: "Lato";

  --zitadel-color-background-50: rgb(255, 255, 255);
  --zitadel-color-background-100: rgb(255, 255, 255);
  --zitadel-color-background-200: rgb(255, 255, 255);
  --zitadel-color-background-300: rgb(255, 255, 255);
  --zitadel-color-background-400: rgb(255, 255, 255);
  --zitadel-color-background-500: rgb(250, 250, 250);
  --zitadel-color-background-600: rgb(222, 222, 222);
  --zitadel-color-background-700: rgb(195, 195, 194);
  --zitadel-color-background-800: rgb(168, 168, 168);
  --zitadel-color-background-900: rgb(142, 142, 142);
  --zitadel-color-background-contrast: rgb(0, 0, 0);

  --zitadel-color-footer-line: rgba(0, 0, 0, 0.12);

  --zitadel-color-card-hover: #ffffff;

  --zitadel-color-input-background: #00000003;
  --zitadel-color-input-border: #1a191938;
  --zitadel-color-input-border-hover: #1a1b1b;
  --zitadel-color-input-border-active: var(--zitadel-color-primary-500);
  --zitadel-color-input-placeholder: var(--zitadel-color-grey-600);

  --zitadel-color-text-50: rgb(0, 0, 0);
  --zitadel-color-text-100: rgb(0, 0, 0);
  --zitadel-color-text-200: rgb(0, 0, 0);
  --zitadel-color-text-300: rgb(0, 0, 0);
  --zitadel-color-text-400: rgb(0, 0, 0);
  --zitadel-color-text-500: rgb(0, 0, 0);
  --zitadel-color-text-600: rgb(0, 0, 0);
  --zitadel-color-text-700: rgb(0, 0, 0);
  --zitadel-color-text-800: rgb(0, 0, 0);
  --zitadel-color-text-900: rgb(0, 0, 0);
  --zitadel-color-text-contrast: rgb(255, 255, 255);
  --zitadel-color-label: #0000008a;

  --zitadel-color-account-selector-hover: rgba(0, 0, 0, 0.02);
  --zitadel-color-account-selector-active: rgba(0, 0, 0, 0.05);

  --zitadel-color-success: #0e6245;
  --zitadel-color-success-background: #cbf4c9;
  --zitadel-color-state-success-font: #0e6245;
  --zitadel-color-state-success-background: #cbf4c9;
  --zitadel-color-state-warn-font: #620e0e;
  --zitadel-color-state-warn-background: #ffc1c1;

  --zitadel-color-footer-background: #00000002;
  --zitadel-color-footer-background-mozilla: var(
    --zitadel-color-background-600
  );

  --zitadel-color-divider: rgba(0, 0, 0, 0.12);

  --zitadel-color-button-disabled: rgba(0, 0, 0, 0.26);
  --zitadel-color-button-disabled-background: rgba(0, 0, 0, 0.12);
  --zitadel-color-button-selected-background: var(--zitadel-color-grey-900);
  --zitadel-color-button-disabled-selected-background: var(
    --zitadel-color-grey-800
  );
  --zitadel-color-raised-button-background: var(--zitadel-color-white);
  --zitadel-color-stroked-button-hover-background: #00000010;
  --zitadel-color-stroked-button-active-background: #00000020;
  --zitadel-color-raised-button-active-background: var(
    --zitadel-color-primary-700
  );

  --zitadel-color-white: #ffffff;
  --zitadel-color-black: #000000;
  --zitadel-color-grey-50: #fafafa;
  --zitadel-color-grey-100: #f5f5f5;
  --zitadel-color-grey-200: #eeeeee;
  --zitadel-color-grey-300: #e0e0e0;
  --zitadel-color-grey-400: #bdbdbd;
  --zitadel-color-grey-500: #9e9e9e;
  --zitadel-color-grey-600: #757575;
  --zitadel-color-grey-700: #616161;
  --zitadel-color-grey-800: #424242;
  --zitadel-color-grey-900: #212121;

  --zitadel-icon-select: url(../../zitadel/select_arrow_light.svg);
  --zitadel-logo-powered-by: url(../../zitadel/logo-dark.svg);

  --zitadel-color-google-text: #8b8d8d;
  --zitadel-color-google-background: #ffffff;
  --zitadel-color-github-text: #8b8d8d;
  --zitadel-color-github-background: #ffffff;
  --zitadel-color-gitlab-text: #8b8d8d;
  --zitadel-color-gitlab-background: #ffffff;
  --zitadel-color-apple-text: #8b8d8d;
  --zitadel-color-apple-background: #ffffff;

  --zitadel-color-qr: var(--zitadel-color-black);
  --zitadel-color-qr-background: var(--zitadel-color-white);

  --google-image-src: url(../../../images/idp/google.png);
  --github-image-src: url(../../../images/idp/github.png);
  --gitlab-image-src: url(../../../images/idp/gitlab.png);
  --azure-image-src: url(../../../images/idp/ms.svg);
  --apple-image-src: url(../../../images/idp/apple.svg);
}

.lgn-dark-theme {
  --zitadel-color-primary-50: #f1f7fd;
  --zitadel-color-primary-100: #afd1f2;
  --zitadel-color-primary-200: #7fb5ea;
  --zitadel-color-primary-300: #4192e0;
  --zitadel-color-primary-400: #2782dc;
  --zitadel-color-primary-500: #2073c4;
  --zitadel-color-primary-600: #1c64aa;
  --zitadel-color-primary-700: #17548f;
  --zitadel-color-primary-800: #134575;
  --zitadel-color-primary-900: #0f355b;

  --zitadel-color-warn-50: #ffe7eb;
  --zitadel-color-warn-100: #ffc4ce;
  --zitadel-color-warn-200: #ff9dad;
  --zitadel-color-warn-300: #ff768c;
  --zitadel-color-warn-400: #ff5874;
  --zitadel-color-warn-500: #ff3b5b;
  --zitadel-color-warn-600: #ff3553;
  --zitadel-color-warn-700: #ff2d49;
  --zitadel-color-warn-800: #ff2640;
  --zitadel-color-warn-900: #ff192f;

  --zitadel-font-family: "Lato";

  --zitadel-color-background-50: rgb(60, 60, 60);
  --zitadel-color-background-100: rgb(55, 55, 55);
  --zitadel-color-background-200: rgb(49, 49, 49);
  --zitadel-color-background-300: rgb(44, 44, 44);
  --zitadel-color-background-400: rgb(36, 36, 36);
  --zitadel-color-background-500: rgb(33, 33, 33);
  --zitadel-color-background-600: rgb(30, 30, 30);
  --zitadel-color-background-700: rgb(28, 28, 28);
  --zitadel-color-background-800: rgb(25, 25, 25);
  --zitadel-color-background-900: rgb(23, 23, 23);
  --zitadel-color-background-contrast: rgb(255, 255, 255);

  --zitadel-color-footer-line: rgba(255, 255, 255, 0.12);

  --zitadel-color-card-hover: #ffffff20;

  --zitadel-color-input-background: rgba(0, 0, 0, 0.2);
  --zitadel-color-input-border: #f9f7f725;
  --zitadel-color-input-border-hover: #ffffff;
  --zitadel-color-input-border-active: var(--zitadel-color-primary-500);
  --zitadel-color-input-placeholder: var(--zitadel-color-grey-600);

  --zitadel-color-text-50: rgb(255, 255, 255);
  --zitadel-color-text-100: rgb(255, 255, 255);
  --zitadel-color-text-200: rgb(255, 255, 255);
  --zitadel-color-text-300: rgb(255, 255, 255);
  --zitadel-color-text-400: rgb(255, 255, 255);
  --zitadel-color-text-500: rgb(255, 255, 255);
  --zitadel-color-text-600: rgb(221, 222, 223);
  --zitadel-color-text-700: rgb(194, 195, 195);
  --zitadel-color-text-800: rgb(167, 168, 169);
  --zitadel-color-text-900: rgb(141, 142, 143);
  --zitadel-color-text-contrast: rgb(0, 0, 0);
  --zitadel-color-label: #ffffffb3;

  --zitadel-color-account-selector-hover: rgba(255, 255, 255, 0.02);
  --zitadel-color-account-selector-active: rgba(255, 255, 255, 0.05);

  --zitadel-color-success: #cbf4c9;
  --zitadel-color-success-background: #4f566b;
  --zitadel-color-state-success-font: #cbf4c9;
  --zitadel-color-state-success-background: #68cf8340;
  --zitadel-color-state-warn-font: #ffc1c1;
  --zitadel-color-state-warn-background: #af455359;

  --zitadel-color-footer-background: #00000020;
  --zitadel-color-footer-background-mozilla: var(
    --zitadel-color-background-600
  );

  --zitadel-color-divider: rgba(255, 255, 255, 0.12);

  --zitadel-color-button-disabled: rgba(0, 0, 0, 0.26);
  --zitadel-color-button-disabled-background: rgba(255, 255, 255, 0.12);
  --zitadel-color-button-selected-background: var(--zitadel-color-grey-900);
  --zitadel-color-button-disabled-selected-background: var(
    --zitadel-color-grey-800
  );
  --zitadel-color-raised-button-background: var(--zitadel-color-grey-800);
  --zitadel-color-stroked-button-hover-background: #ffffff10;
  --zitadel-color-stroked-button-active-background: #ffffff20;
  --zitadel-color-raised-button-active-background: var(
    --zitadel-color-primary-300
  );

  /*--zitadel-color-label: var(--zitadel-color-grey-600); same */
  --zitadel-icon-select: url(../../zitadel/select_arrow_dark.svg);
  --zitadel-logo-powered-by: url(../../zitadel/logo-light.svg);

  --zitadel-color-google-text: #8b8d8d;
  --zitadel-color-google-background: #ffffff;
  --zitadel-color-github-text: #8b8d8d;
  --zitadel-color-github-background: #ffffff;
  --zitadel-color-gitlab-text: #8b8d8d;
  --zitadel-color-gitlab-background: #ffffff;
  --zitadel-color-apple-text: #8b8d8d;
  --zitadel-color-apple-background: #ffffff;

  --google-image-src: url(../../../images/idp/google.png);
  --github-image-src: url(../../../images/idp/github-white.png);
  --gitlab-image-src: url(../../../images/idp/gitlab.png);
  --azure-image-src: url(../../../images/idp/ms.svg);
  --apple-image-src: url(../../../images/idp/apple-dark.svg);
}
